<template>
  <div class="wrap">
    <!-- header头部 -->
    <!-- <m-header
      :activeIndex="2"
      :backcolor="'#1968FA'"
      :color="'#fff'"
      opacity="1"
      hocolor="#fff"
      filter="blur(0px)"
    ></m-header> -->
    <div style="height: 50px"></div>
    <div class="container" style="width: 100%; max-width: 1200px">
      <div class="nav-top">
        <el-page-header
          :title="'退出'"
          @back="goBack"
          :content="answerList.templateName"
        >
        </el-page-header>
        <div class="nav-xinxi">
          <div>
            您的得分：<span style="color: #fa1900; font-size: 24px">{{
              answerList.score
            }}</span>
          </div>
          <div
            style="cursor: pointer"
            @click="handleGetRedoJudge"
            v-if="$store.state.userData.type == '0'"
          >
            <i
              class="el-icon-refresh-right"
              style="font-size: 18px; margin-right: 10px"
            ></i
            ><span>重新练习</span>
          </div>
        </div>
      </div>
      <div class="subject">
        <el-row :gutter="20">
          <el-col :sm="15">
            <div class="left-content">
              <p
                style="
                  background: #eaf1ff;
                  padding: 20px 30px;
                  font-size: 16px;
                  color: #333333;
                  font-weight: bold;
                "
              >
                {{ sujectType }}
              </p>
              <div ref="scrollMenuRef" class="scrollMenuBox">
                <div class="subbox-box">
                  <div>
                    <span class="tihao">{{ questionNumcopy + 1 }}</span>

                    <span style="margin-left: 20px">{{
                      timuList.topicContent
                    }}</span>
                  </div>
                  <div class="subbox" v-if="sujectType != '多选题'">
                    <div
                      class="options"
                      v-for="(item, index) in timuList.options"
                      :key="index"
                    >
                      <div
                        :class="`${
                          timuListCopy.options[index] == timuList.rightKey
                            ? 'option is-option-true'
                            : 'option'
                        }`"
                        :style="`${
                          timuListCopy.options[index] == timuList.option
                            ? 'background:red;color:#fff'
                            : ''
                        }`"
                      >
                        {{ item.split("、")[0] }}
                      </div>
                      <div>{{ splitFirst(item, "、")[1] }}</div>
                    </div>
                  </div>
                  <!-- 多选框 -->
                  <div class="subbox" v-else>
                    <div
                      class="options"
                      v-for="(item, index) in timuList.options"
                      :key="index"
                    >
                      <div
                        :class="
                          timuList.rightKey
                            .split('')
                            .find((eitem) => item.split('、')[0] == eitem)
                            ? 'option is-option-true'
                            : 'option'
                        "
                        :style="
                          timuList.option
                            .split('')
                            .find((eitem) => item.split('、')[0] == eitem)
                            ? 'background:red;color:#fff;'
                            : ''
                        "
                      >
                        {{ item.split("、")[0] }}
                      </div>
                      <div style="width: 500px;">{{ splitFirst(item, "、")[1] }}</div>
                    </div>
                    <!-- <el-checkbox-group
                      class="check-options"
                      v-model="checkList"
                    >
                      <el-checkbox
                        disabled
                        style="margin-bottom: 20px"
                        v-for="(item, index) in timuList.options"
                        :label="item.split('、')[0]"
                        :key="index"
                        >{{ item }}</el-checkbox
                      >
                    </el-checkbox-group> -->
                  </div>
                </div>
              </div>
              <div class="analysis-box">
                <div class="analysis-top">
                  <div class="an-rightkey">
                    正确答案:<span style="margin-left: 10px; color: #1968fa">{{
                      timuList.rightKey
                    }}</span>
                  </div>
                  <div class="an-option" v-if="timuList.option">
                    您的答案:<span
                      :style="
                        timuList.rightKey == timuList.option
                          ? 'margin-left:10px;color:#1968fa'
                          : 'margin-left:10px;color:red'
                      "
                      >{{ timuList.option }}</span
                    >
                  </div>
                  <div class="an-option" v-else>
                    您的答案:<span style="margin-left: 10px; color: red"
                      >未作答</span
                    >
                  </div>
                </div>
                <div class="analysis-bottom">
                  <div class="tip">解析：</div>
                  <div v-if="timuList.topicAnalysis" class="content">
                    {{ timuList.topicAnalysis }}
                  </div>
                  <div v-else class="content">暂无解析</div>
                </div>
              </div>
            </div>
            <div class="nextlast-box">
              <div class="btn-box">
                <el-button class="last-btn" @click="handleNextQuestion('last')"
                  >上一题</el-button
                >
                <el-button class="next-btn" @click="handleNextQuestion('next')"
                  >下一题</el-button
                >
              </div>
            </div>
          </el-col>
          <!-- 答题卡 -->
          <el-col :sm="9">
            <div class="right-content">
              <div class="datika">答题卡</div>
              <div class="tip">
                <div style="display: flex"><span class="yizuo"></span>正确</div>
                <div style="display: flex">
                  <span class="wei"></span>错误/不完全正确
                </div>
                <div style="display: flex">
                  <span class="wei-dati"></span>未作答
                </div>
              </div>
              <div class="option">
                <div class="qus-type">单选题</div>
                <div class="medium">
                  <div
                    v-for="(item, index) in danxuanList"
                    :key="item.id"
                    @click="
                      handleCheckQusetion(index, item, danxuanList, '单选题')
                    "
                  >
                    <div
                      :class="
                        item.option == item.rightKey
                          ? 'op-box op-box-blue'
                          : 'op-box op-box-red'
                      "
                      :style="
                        item.option
                          ? ''
                          : 'border:1px solid gray !important;background:#fff !important;color:gray !important;'
                      "
                    >
                      {{ index + 1 }}
                    </div>
                  </div>
                </div>
                <div class="qus-type">多选题</div>
                <div class="medium">
                  <div
                    v-for="(item, index) in duoxuanList"
                    :key="item.id"
                    @click.prevent="
                      handleCheckQusetion(index, item, duoxuanList, '多选题')
                    "
                  >
                    <div
                      :class="
                        item.option == item.rightKey
                          ? 'op-box op-box-blue'
                          : 'op-box op-box-red'
                      "
                      :style="
                        item.option
                          ? ''
                          : 'border:1px solid gray !important;background:#fff !important;color:gray !important;'
                      "
                    >
                      {{ index + 1 + danxuanList.length }}
                    </div>
                  </div>
                </div>
                <div class="qus-type">判断题</div>
                <div class="medium">
                  <div
                    v-for="(item, index) in panduanList"
                    :key="item.id"
                    @click.prevent="
                      handleCheckQusetion(index, item, panduanList, '判断题')
                    "
                  >
                    <div
                      :class="
                        item.option == item.rightKey
                          ? 'op-box op-box-blue'
                          : 'op-box op-box-red'
                      "
                      :style="
                        item.option
                          ? ''
                          : 'border:1px solid gray !important;background:#fff !important;color:gray !important;'
                      "
                    >
                      {{ index + 1 + danxuanList.length + duoxuanList.length }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- footer页脚 -->
    <!-- <m-fotter /> -->
  </div>
</template>

<script>
// getRedoJudge
import { getExamPaper } from "@/api/questionBank";
import { STATUS_CODE_OK } from "@/config";
// import MHeader from "@/components/MHeader.vue";
// import MFotter from "@/components/MFotter.vue";
export default {
  name: "completed",
  data() {
    return {
      checkoptionlist: {},
      checkList: [],
      sujectType: "", // 题目类型
      mubiaoArray: [], //过渡数组-逻辑
      isOptuionSelcet: "", // 是否作答
      isSelect: "", // 是否点击答题卡
      timuList: {}, // 题目数据
      timuListCopy: {}, // 题目数据-副本
      answer: {}, // 答案提交数据
      answerList: {}, // 答案数据-本地
      questionNum: 1, // 题号
      questionNumcopy: 0, // 题号-副本
      panduanList: [], // 判断题
      duoxuanList: [], // 多选题
      danxuanList: [], // 单选题
      datalist: {}, // 路由数据-考试信息
      timer: null, // 计时器
      countDownTime: 36000, // 倒计时时间
      practiceId: "",
    };
  },
  async created() {
    // 获取本地数据
    await this.handleGetData();
    this.practiceId = await JSON.parse(
      localStorage.getItem(`practiceId${this.$store.state.userData.id}`)
    );
    await this.handleGetContinueExam();
    this.handleCheckQusetion(
      0,
      this.danxuanList[0],
      this.danxuanList,
      "单选题"
    );
  },
  methods: {
    // 只切割第一个字符串
    splitFirst(str, delimiter) {
      const index = str.indexOf(delimiter);
      if (index === -1) {
        return [str]; // 如果没有找到分隔符，则返回原字符串
      }
      return [str.slice(0, index), str.slice(index + delimiter.length)];
    },
    async handleGetRedoJudge() {
      this.handleGoUrl("/questionbank/again");
      // let { data } = await getRedoJudge({
      //   templateId: this.answerList.templateId,
      // });
      // if (data.code == STATUS_CODE_OK) {
      //   if (data.data == "1") {
      //     this.handleGoUrl("/questionbank/again");
      //   } else {
      //     this.$notify.warning({
      //       title: "提示",
      //       message: "该练习记录还未做完，不能重新练习!",
      //     });
      //     return;
      //   }
      // }
    },
    // 跳转考试页面
    handleGoUrl(urlName) {
      this.$router.push({
        path: urlName,
      });
    },
    async handleGetContinueExam() {
      let { data } = await getExamPaper({
        practiceRecordId: this.practiceId,
      });
      if (data.code == STATUS_CODE_OK) {
        this.answerList = data.data;
        this.panduanList = data.data.judge;
        this.duoxuanList = data.data.multiple;
        this.danxuanList = data.data.single;
      }
    },
    // 答题卡选项
    handleCheckQusetion(index, item = {}, arr = [], type) {
      if (arr.length < 1) {
        return false;
      }
      this.sujectType = type;
      this.questionNumcopy = index;
      if (this.sujectType == "多选题") {
        this.checkList = [];
        this.questionNumcopy = index + this.danxuanList.length;
        // if (this.$store.state.userData.type ) {
        //   this.answerList = JSON.parse(
        //     localStorage.getItem(`completed${this.$store.state.userData.id}`)
        //   );
        // }
        for (let key in this.answerList) {
          if (key == item.id) {
            this.answerList[key].split("").forEach((item) => {
              this.checkList.push(item);
            });
          }
        }
      }
      if (this.sujectType == "判断题") {
        this.questionNumcopy =
          index + this.danxuanList.length + this.duoxuanList.length;
      }
      if (arr.length >= 1) {
        this.mubiaoArray = arr;
      }
      this.isOptuionSelcet = this.answerList[item.id];
      this.questionNum = index;
      this.timuList = item;
      this.isSelect = item.id;
      if (typeof this.timuList.options != "object") {
        this.timuList.options = this.timuList.options.split(";;");
      }
      this.timuListCopy = JSON.parse(JSON.stringify(item));
      this.timuListCopy.options.forEach((item, eindex) => {
        this.timuListCopy.options.splice(eindex, 1, item.split("、")[0]);
      });
    },

    // 上一题下一题
    async handleNextQuestion(type) {
      let arr = [];
      if (this.sujectType == "单选题") {
        arr = this.danxuanList;
      }
      if (this.sujectType == "多选题") {
        arr = this.duoxuanList;
      }
      if (this.sujectType == "判断题") {
        arr = this.panduanList;
      }

      if (type == "last") {
        if (this.questionNum < 1 && this.sujectType == "单选题") {
          this.questionNum = 1;
          return;
        }
        if (this.questionNum == 0 && this.sujectType == "多选题") {
          this.sujectType = "单选题";
          this.questionNum = this.danxuanList.length - 1;
          this.handleCheckQusetion(
            this.questionNum,
            this.danxuanList[this.questionNum],
            this.danxuanList,
            this.sujectType
          );
          return;
        } else if (this.questionNum == 0 && this.sujectType == "判断题") {
          this.sujectType = "多选题";
          this.questionNum = this.duoxuanList.length - 1;
          this.handleCheckQusetion(
            this.questionNum,
            this.duoxuanList[this.questionNum],
            this.duoxuanList,
            this.sujectType
          );
        } else {
          this.questionNum -= 1;
          this.handleCheckQusetion(
            this.questionNum,
            this.mubiaoArray[this.questionNum],
            arr,
            this.sujectType
          );
        }
      } else {
        if (
          this.questionNum > this.mubiaoArray.length - 2 &&
          this.sujectType == "判断题"
        ) {
          return;
        } else if (
          this.sujectType == "单选题" &&
          this.questionNum == this.mubiaoArray.length - 1
        ) {
          if (this.duoxuanList.length < 1) {
            return false;
          }
          this.sujectType = "多选题";
          this.questionNum = 0;
          this.handleCheckQusetion(
            this.questionNum,
            this.duoxuanList[this.questionNum],
            this.duoxuanList,
            this.sujectType
          );
          return;
        } else if (
          this.sujectType == "多选题" &&
          this.questionNum == this.mubiaoArray.length - 1
        ) {
          if (this.panduanList.length < 1) {
            return false;
          }
          this.sujectType = "判断题";
          this.questionNum = 0;
          this.handleCheckQusetion(
            this.questionNum,
            this.panduanList[this.questionNum],
            this.panduanList,
            this.sujectType
          );
        } else {
          this.questionNum += 1;
          this.handleCheckQusetion(
            this.questionNum,
            this.mubiaoArray[this.questionNum],
            arr,
            this.sujectType
          );
        }
      }
    },

    goBack() {
      if (
        sessionStorage.getItem("goback") == "/questionbank" ||
        sessionStorage.getItem("goback") == "/questionbank/continue" ||
        sessionStorage.getItem("goback") == "/questionbank/again"
      ) {
        this.$router.push("/resourcesdetails");
        return;
      } else {
        this.$router.push(sessionStorage.getItem("goback"));
      }
    },
    // 获取本地基本详情数据
    handleGetData() {
      if (this.$route.params.row) {
        sessionStorage.setItem(
          "question",
          JSON.stringify(this.$route.params.row)
        );
      }
      this.datalist = JSON.parse(sessionStorage.getItem("question"));
      this.countDownTime = this.datalist.duration * 60;
    },
  },
  // components: {
  //   MHeader,
  //   MFotter,
  // },
};
</script>
<style lang="scss" scoped>
.el-button--primary {
  color: #ffffff;
  background-color: #1968fa !important;
  border-color: #1968fa !important;
}
.el-page-header {
  background: #fff;
  padding: 10px;
}
::v-deep .el-row {
  width: 100%;
}
::v-deep .el-page-header__title {
  line-height: 23px !important;
  width: 60px !important;
  text-align: center;
  height: 26px !important;
  color: #ff9500;
  margin-top: 8px;
  /* line-height: 43px; */
  border-radius: 20px;
  border: 1px solid #ff9500;
}
::v-deep .el-page-header__left .el-icon-back {
  display: none;
}
::v-deep .is-option-select {
  background: #1968fa !important;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #1968fa !important;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #1968fa !important;
}
::v-deep .el-page-header__content {
  font-size: 18px !important;
}
::v-deep .el-checkbox-button {
  position: relative;
  margin: 0px 10px !important;
}
::v-deep .el-checkbox__label {
  color: #000;
  vertical-align: text-top;
  white-space: normal;
  word-break: break-all;
  max-width: 650px;
}
::v-deep .el-checkbox-button__inner {
  border: 1px solid #8d9399;
  color: #8d9399 !important;
  text-align: none !important;
  box-sizing: border-box !important;
  margin: 0px !important;
  transition: none !important;
  padding: 0px !important;
  border-radius: none !important;
  display: flex !important;
  justify-content: space-evenly !important;
  align-items: center !important;
  width: 30px !important;
  height: 30px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  border-radius: 0 !important;
}
::v-deep .el-page-header__content {
  font-size: 22px;
  color: #333;
  text-align: center;
  width: 1200px;
  margin: 0px auto;
}
.time-down {
  width: 1200px;
  color: #fff;
  font-weight: bold;
  font-size: 26px;
  background: url("../../assets/images/timeback.png");
  margin: 10px auto;
  padding: 20px;
  text-align: center;
}
.nav-top {
  background: #fff;
  padding: 10px 30px 20px;
  margin-top: 20px;
  border-radius: 10px;
  .nav-xinxi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333333;
    font-size: 16px;
    padding: 30px 0px;
    border-top: 1px solid #ebeff2;
  }
}
.subject {
  .submit {
    background: #fff;
    padding: 20px 0px;
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 20px;
    .el-button {
      width: 300px;
    }
  }
  .nextlast-box {
    margin: 20px 0px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 72px;
    background: #fff;
    .btn-box {
      .el-button {
        border: 1px solid #409eff;
        color: #409eff;
      }
      .last-btn {
        width: 160px;
        margin: 0px 30px;
      }
      .next-btn {
        width: 160px;
        margin: 0px 30px;
      }
    }
  }
  background: #eee;
  .left-content {
    background: #fff;
    padding-bottom: 30px;
  }
  .right-content {
    min-height: 848px;
    .tip {
      display: flex;
      justify-content: space-evenly;
      margin-bottom: 20px;
      .yizuo {
        background: #1968fa;
        width: 20px;
        height: 20px;
        border-radius: 2px;
        display: inline-block;
        margin-right: 10px;
      }
      .wei {
        margin-right: 10px;
        background: #ffe7e4;
        border: 1px solid #fa1900;
        width: 20px;
        height: 20px;
        border-radius: 2px;
        display: inline-block;
      }
      .wei-dati {
        margin-right: 10px;
        background: #fff;
        border: 1px solid gray;
        width: 20px;
        height: 20px;
        border-radius: 2px;
        display: inline-block;
      }
    }
    .datika {
      font-size: 18px;
      color: #333;
      font-weight: bold;
      padding: 20px 0px;
      margin: 0px 30px;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;
      box-sizing: border-box;
    }
    background: #fff;
    margin-top: 10px;
    .option {
      margin: 0px 30px;
      max-height: 774px;
      overflow-y: auto;
      .medium {
        display: flex;
        flex-wrap: wrap;
        .op-active {
          border: 1px solid #1968fa;
          color: #fff !important;
        }
        .op-box-blue {
          background: #1968fa;
          color: #fff !important;
        }
        .op-box-red {
          background: #ffe7e4 !important;
          border: 1px solid #fa1900 !important;
          color: #fa1900 !important;
        }
        .op-box {
          color: #8d9399;
          cursor: pointer;
          width: 30px;
          height: 30px;
          border: 1px solid #8d9399;
          margin: 10px;
          text-align: center;
          line-height: 30px;
        }
      }
      .qus-type {
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
}

.analysis-box {
  width: 94%;
  margin: 0px auto;
  min-height: 340px;
  background: #f7f8fa;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #dce1e5;
  .analysis-top {
    display: flex;
    border-bottom: 1px solid #e6eaed;
    color: #333333;
    font-size: 16px;
    padding: 20px 0px;
    .an-rightkey {
      margin-right: 50px;
    }
  }
  .analysis-bottom {
    display: flex;
    margin-top: 20px;
    .tip {
      font-size: 16px;
      padding: 20px 20px 20px 0px;
      white-space: nowrap;
    }
    .content {
      font-size: 16px;
      padding: 20px 20px 20px 0px;
      width: 100%;
      word-break: break-all;
    }
  }
}
.scrollMenuBox {
  padding: 0px 23px;
  padding-bottom: 50px;
  margin-bottom: 40px;
  border-bottom: 1px solid #dce1e5;
  height: 300px;
  .subbox-box {
    font-size: 16px;
    margin: 10px;
    margin-top: 30px;
    .subbox {
      margin-top: 20px;
      margin-left: 60px;
      .check-options {
        padding: 10px 0px;
        font-size: 14px;
        display: flex;
        flex-direction: column;
      }
      .options {
        padding: 10px 0px;
        font-size: 14px;
        display: flex;
        align-items: center;
        .is-option-true {
          background: #1968fa !important;
          color: #fff;
          border: 1px solid #fff !important;
        }
        .is-option-false {
          background: #fa1900;
          color: #fff;
          border: 1px solid #fff !important;
        }
        .is-checkbox-select {
          background: #1968fa;
          color: #fff;
          border: 1px solid #fff !important;
        }
        .check-option {
          width: 20px;
          height: 20px;
          display: inline-block;
          border: 1px solid #73797f;
          text-align: center;
          line-height: 18px;
          font-size: 12px;
          margin-right: 10px;
        }
        .option {
          width: 25px;
          height: 25px;
          display: inline-block;
          text-align: center;
          line-height: 23px;
          border-radius: 100px;
          font-size: 12px;
          margin-right: 10px;
          border: 1px solid #73797f;
        }
      }
    }
  }
}

.tihao {
  display: inline-block;
  width: 19px;
  height: 30px;
  text-align: center;
  line-height: 25px;
  color: #fff;
  font-size: 12px;
  background: url("../../assets/images/tihao.png") 100% no-repeat;
}
</style>
